<template>
	<view class="body">
		<xk-header title="工单材料"></xk-header>
		<view v-if="mateList.length > 0" class="m-list" :style="{paddingTop: type == 'view' ? '30rpx': '750rpx'}">
			<view v-for="(item, index) of mateList" :key="index" class="m-item">
				<view class="name">{{item.material_name}}</view>
				<view>{{item.price}}元 x {{item.num}}({{item.unit}}) = {{(item.price * item.num).toFixed(2)}}元</view>
				<image v-if="type != 'view'" @click="deleteMate(index)" class="del-icon" :src="(imgUrl+'/wx/delete.png')"></image>
			</view>
		</view>
		<view class="empty-view" v-else :style="{marginTop: type == 'view' ? '50rpx': '650rpx'}">
			<image class="empty-icon" :src="(imgUrl+'/wx/empty_data_icon.png')"></image>
			<view>哎呀，该界面暂无内容~</view>
		</view>
		<view v-if="type != 'view'" class="bottom-form">
			<!-- <view class="header"> 添加材料</view> -->
			<view class="list">
				<view class="list-item">
					<view>材料名称：</view>
					<input confirm-type="next" v-model="mate.material_name" class="input-item" placeholder="请输入材料名称" placeholder-class="placeholder"/>
				</view>
				<view class="list-item">
					<view>计量单位：</view>
					<input confirm-type="next" v-model="mate.unit" class="input-item" placeholder="请输入计量单位" placeholder-class="placeholder"/>
				</view>
				<view class="list-item">
					<view>单价（元）：</view>
					<input confirm-type="next" type="digit" v-model="mate.price" class="input-item" placeholder="请输入材料单价" placeholder-class="placeholder"/>
				</view>
				<view class="list-item">
					<view>数量：</view>
					<input  type="number" v-model="mate.num" class="input-item" placeholder="请输入材料所需数量" placeholder-class="placeholder"/>
				</view>
				<view @click="addMate" class="common-btn">添加</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:this.$config.BASE_imgUrl,
				mateList: [],
				type: 'edit',
				mate: {
					material_name: '',
					unit: '',
					price: '',
					num: '',
					total: ''
				}
			};
		},
		onLoad(options){
			console.log('options',options)
			this.type = options.type
			this.mateList = JSON.parse(options.mateList || '[]')
		},
		methods:{
			deleteMate(index){
				this.mateList.splice(index, 1);
				uni.$emit('getMateInfo', this.mateList)
			},
			addMate(){
				let temp = {}
				if(!this.mate.material_name){
					this.$util.toast('请输入材料名称')
					return
				}
				if(!this.mate.price){
					this.$util.toast('请输入材料单价')
					return
				}
				if(!this.mate.num){
					this.$util.toast('请输入材料数量')
					return
				}
				if(!this.mate.unit){
					this.$util.toast('请输入材料单位')
					return
				}
				this.mate.total = (this.mate.price * this.mate.num).toFixed(2)
				Object.assign(temp, this.mate)
				this.mateList.push(temp)
				uni.$emit('getMateInfo', this.mateList)
				this.mate = {
					material_name: '',
					unit: '',
					price: '',
					num: '',
					total: ''
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.bottom-form{
	background-color: #FFFFFF;
	border-bottom-left-radius: 50rpx;
	border-bottom-right-radius: 50rpx;
	position: fixed;
	top: calc(var(--status-bar-height) + 94rpx);
	left:0;
	width: 100vw;
	.header{
		font-size: 32rpx;
		font-weight: bolder;
		color: #333333;
		padding-top: 30rpx;
		text-align: center;
	}
	.list {
		margin: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		.list-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #333333;
			font-size: 28rpx;
			padding: 30rpx 20rpx;
			> view:first-child {
				color: #333333;
				width: 200rpx;
			}
			.input-item {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				margin-left: 20rpx;
			}
		}
	}
}
.m-list{
	padding: 750rpx 30rpx 30rpx;
	.m-item{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
		color: #666666;
		font-size: 26rpx;
		.name{
			font-size: 32rpx;
			font-weight: bolder;
			color: #333333;
		}
		.del-icon{
			position: absolute;
			width: 50rpx;
			height: 50rpx;
			top: -10rpx;
			right: -10rpx;
		}
	}
}
</style>
